<template>
    <!-- 好友列表-->
    <div class="content-friend">
        <el-divider content-position="left" v-if="$route.query.routerKeyPath[0] =='推荐好友'">
            <b>好友推荐</b>
        </el-divider>
        <div style="overflow:hidden;min-height:500px">
            <el-card class="box-card" v-for="(item, index) in friendGoupList" :key="index">
                <div @click="friendChecked(index)">
                    <div v-if="manageMode === true && item.checked === true" class="content-friend-checked">
                        <i class="el-icon-check"></i>
                    </div>
                    <div class="box-card-img">
                        <div class="head_portrait">
                            <div class="portrait">
                                <el-avatar :size="60">
                                    <img :src="item.imgUrl | pictureUrl" />
                                </el-avatar>
                                <div v-if="$route.query.routerKeyPath[0] !='recommendFriend'
                                && textTitle != '他的关注' && textTitle != '他的粉丝' && $route.query.routerKeyPath[0] != 'friend'
                                &&$route.query.routerKeyPath[0] !='addFriend'">
                                    <i @click="handleFollow(item)" v-if="item.flag == '1'"
                                        class="follow_icon el-icon-success" style="color: #409EFF;"></i>
                                    <i @click="handleFollow(item)" v-else class="follow_icon el-icon-circle-plus"></i>
                                </div>
                            </div>
                            <div class="follow" v-if="$route.query.routerKeyPath[0] !='recommendFriend'
                            && textTitle != '他的关注' && textTitle != '他的粉丝' && $route.query.routerKeyPath[0] != 'friend'
                            &&$route.query.routerKeyPath[0] !='addFriend'">
                                <span>{{(item.flag == '1')?'已关注':'关注'}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="box-card-content-friend">
                        <p style="">{{ item.name }} <spna style="float: right">{{ item.role }}</spna>
                        </p>
                        <p v-if="$route.query.routerKeyPath[0] !='recommendFriend'&&$route.query.routerKeyPath[0] !='addFriend'
                        && textTitle != '他的关注' && textTitle != '他的粉丝'"
                        >{{item.remark?item.remark:'未备注'}}</p>
                        <!-- <p>是否已经是好友</p> -->
                        <p>{{ item.info }}</p>
                        <el-button type="text" :disabled="item.apply" v-if="$route.query.routerKeyPath[0] !='follow'&&$route.query.routerKeyPath[0] !='friend' 
                        && $route.query.routerKeyPath[0] !='['" @click="handleFollow(item,'2')">
                            {{!item.apply?'添加为好友':'已发出申请'}}
                            <i v-if="!item.apply" class="el-icon-plus"></i>
                        </el-button>
                        <div v-else>
                            <!-- 移动到分组 -->
                            <el-select style="width: 70%;" size="mini" v-model="item.classifyId"
                                @change="groupChange(item)">
                                <el-option :label="item.name" :value="item.id"
                                    v-for="(item, index) in moveGroup(leftMenuCache)" :key="index"></el-option>
                            </el-select>
                            <el-dropdown trigger="click" style="width: 52px;float: right;">
                                <span class="el-dropdown-link">
                                    操作
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-popover placement="left" width="360" v-model="item.ramarkVisible">
                                        <p>设置备注</p>
                                        <el-input type="textarea" v-model="remarkTextarea" placeholder="请输入...">
                                        </el-input>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" @click="item.ramarkVisible = false">取消
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="remarkUpdate(item)">确定
                                            </el-button>
                                        </div>
                                        <el-dropdown-item slot="reference">
                                            <el-button type="text">设置备注</el-button>
                                        </el-dropdown-item>
                                    </el-popover>
                                    <el-popover placement="left" width="360" v-model="item.moveTolack" v-if="$route.query.routerKeyPath[0] !='follow'">
                                        <p>移入黑名单</p>
                                        <span>确定移入黑名单吗？</span>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" @click="item.moveTolack = false">取消
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="moveToblack(item)">确定
                                            </el-button>
                                        </div>
                                        <el-dropdown-item slot="reference">
                                            <el-button type="text">移入黑名单</el-button>
                                        </el-dropdown-item>
                                    </el-popover>
                                    <el-dropdown-item>
                                        <el-button type="text" @click="removeFriend(item)" v-if="$route.query.routerKeyPath[0] =='friend' 
                                        &&  $route.query.routerKeyPath[0] !='['">移除好友</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="pageStyle">
            <el-button v-if="($route.query.routerKeyPath[0] !='follow' && $route.query.routerKeyPath[0] ==!'friend'&&  $route.query.routerKeyPath[0] !='[')
            || $route.query.routerKeyPath == 'recommendFriend'" type="text" @click="getHttpList('change')">
                <b>换一批</b>
            </el-button>
            <!--分页-->
            <el-pagination v-if="$route.query.routerKeyPath[0] =='follow' || $route.query.routerKeyPath[0] =='addFriend'
            || $route.query.routerKeyPath[0] =='friend'  || $route.query.routerKeyPath[0] =='['" background
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[8, 16, 24, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total"></el-pagination>
        </div>
        <el-dialog title="新建分组" :visible.sync="addGroupV" width="30%" :show-close='false' center>
            <el-input type="text" placeholder="请输入新建分组名称" v-model="addGroupName" maxlength="20" minlength="2"
                show-word-limit>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="getRecommend('addGroupC')">取 消</el-button>
                <el-button type="primary" @click="getRecommend('addGroup')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    const baseUrl = "http://topsmart.xyz:1315/";
    export default {
        props: ['search', 'sortType', 'textTitle'],
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                otherUserInfo: state => state.userModule.otherUserInfo,
                addGroupFlag: state => state.commonModule.addGroupFlag,
                leftMenuCache: state => state.studentAnsweringModule.leftMenuCache,
            })
        },
        watch: {
            addGroupFlag(val) {
                this.getRecommend();
            },
            $route(val) {
                if (this.$route.query.routerKeyPath[1] == 30000000) {
                    this.addGroupV = true
                } else {
                    this.addGroupV = false
                }
                this.search = ''
                this.getRecommend();
            },
        },
        mounted() {
            this.getRecommend();
        },
        created() {
            // this.$nextTick(() =>{
            //     this.getRecommend();
            // })
        },
        data() {
            return {
                ramarkVisible: false,
                remarkTextarea: '',
                transferIndex: null, // Show the menu that was clicked
                maxlength: 20,
                value: "",
                workValue: "",
                friendGoupList: [],
                manageMode: false, // 管理模式
                currentPage: 1,
                pageSize: 8,
                total: 0,
                addGroupV: false,
                addGroupName: '',
            };
        },
        methods: {
            getConcernedTreeList() {
                this.$store.dispatch('studentAnsweringModule/concernedTreeList')
            },
            moveToblack(params) {
                this.$store.dispatch('studentAnsweringModule/backlistjoin', {
                    id: params.id,
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("加入黑名单成功")
                        this.getConcernedTreeList()
                        this.getRecommend()
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                })
            },
            removeFriend(params) {
                this.$store.dispatch('studentAnsweringModule/friendDel', {
                    id: params.userId,
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("移除成功")
                        this.getConcernedTreeList()
                        this.getRecommend()
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                })
            },
            groupChange(params) {
                // console.log(params)
                this.groupMove(params)
            },
            // 移动分组
            groupMove(params) {
                this.$store.dispatch('studentAnsweringModule/groupMove', {
                    classifyId: params.groupId || params.classifyId,
                    ids: params.id,
                    type: this.$route.query.routerKeyPath[0] != 'follow' ? 0 : 1
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("移动成功")
                        this.getConcernedTreeList()
                        this.getRecommend()
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                })
            },
            // 修改备注名称
            remarkUpdate(params) {
                if (this.remarkTextarea == '') {
                    this.$message.warning('请先输入备注名称')
                } else {
                    this.$store.dispatch('studentAnsweringModule/remark', {
                        id: params.id,
                        remarkname: this.remarkTextarea
                    }).then(res => {
                        if (res.data.code == 200) {
                            params.remark = this.remarkTextarea
                            this.$message.success('修改成功')
                            this.remarkTextarea = ''
                            params.ramarkVisible = false
                        }
                    })
                }
            },
            // 移动分组下拉选择项
            moveGroup(params) {
                return params.filter(item => item.remark == this.$route.query.routerKeyPath[0])[0].children.filter(
                    item =>
                    item.id > 0 && (item.id != 10000000 && item.id != 20000000 && item.id != 30000000 &&
                        item.name != '已分组' && item.name != '全部关注' && item.name != '全部粉丝' && item.name != '全部好友'))
            },
            // 获取
            getHttpList(params) {
                this.$store
                    .dispatch("studentAnsweringModule/recommend", {
                        limit: this.pageSize,
                        page: this.currentPage,
                        search: this.search,
                        sort: this.sortType,
                        type: 1
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.total = res.data.result.total
                            res.data.result.list.map(item => {
                                if (item.flag == null) {
                                    item.flag = '0'
                                    item.apply = false
                                }
                            })
                            this.friendGoupList = res.data.result.list;
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    });
            },
            handleFollow(followID, lenve) {
                if (followID.flag == null || followID.flag == '0' || lenve == "2") {
                    this.$store
                        .dispatch("studentAnsweringModule/addFollow", {
                            id: followID.userId ||followID.concernedid,
                            lenve: lenve ? lenve : 1
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(lenve ? "添加好友申请已成功发出" : "关注成功");
                                this.getConcernedTreeList()
                                if (lenve) {
                                    this.friendGoupList.map(item => {
                                        if (item.userId == followID.userId) {
                                            item.apply = true
                                        }
                                    });
                                } else {
                                    this.friendGoupList.map(item => {
                                        if (item.userId == followID.userId) {
                                            item.flag = '1';
                                        }
                                    });
                                }
                                // console.log(this.friendGoupList)
                            }else if(res.data.code == 500){
                                this.$message.success(lenve ? "已申请，请等待对方同意" : "请求失败");
                                 if (lenve || lenve == 2) {
                                    this.friendGoupList.map(item => {
                                        if (item.userId == followID.userId) {
                                            item.apply = true
                                        }
                                    });
                                } 
                            }
                        });
                } else {
                    this.$store
                        .dispatch("studentAnsweringModule/beanremove", {
                            userId: followID.userId
                        })
                        .then(res => {
                            if (res.data.code == 200 || res.data.code == 500) {
                                this.$message.success("取消关注成功");
                                this.getConcernedTreeList()
                                this.friendGoupList.map(item => {
                                    if (item.userId == followID.userId) {
                                        item.flag = '0';
                                    }
                                });
                            }
                        });
                }
            },
            //选中好友
            friendChecked(index) {
                if (this.manageMode) {
                    this.friendGoupList[index].checked = true;
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getRecommend();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getRecommend();
            },
            // 列表内容
            getRecommend(params) {
                var lenve = 1;
                var isAdd = true;
                switch (this.$route.query.routerKeyPath[0]) {
                    case "blackName":
                        lenve = -1;
                        break;
                    case "follow":
                        lenve = 1;
                        break;
                    case "friend":
                        lenve = 2;
                        break;
                    case "fans":
                        lenve = 3;
                        break;
                    case "addFriend":
                        lenve = 4;
                        isAdd = false;
                        this.getHttpList(lenve);
                        break;
                    case "recommendFriend":
                        isAdd = false;
                        this.getHttpList(lenve);
                        lenve = 5;
                        break;
                }
                if (isAdd) {
                    if (this.$route.query.routerKeyPath[1] == 10000000 || this.$route.query.routerKeyPath[1] ==
                        20000000 || this.$route.query.routerKeyPath[1] == 30000000) {
                        this.addGroupV = true
                        if (params == 'addGroup') {
                            if (this.addGroupName != '') {
                                this.$store
                                    .dispatch("studentAnsweringModule/concernSave", {
                                        name: this.addGroupName,
                                        parentid: this.$route.query.routerKeyPath[1].slice(0, 1)
                                    })
                                    .then(res => {
                                        if (res.data.code == 200) {
                                            this.$store.commit('commonModule/CHANGE_FLUSHTREEFLAG')
                                            this.$message.success('添加成功')
                                            this.addGroupName = ''
                                            this.addGroupV = false
                                        } else {
                                            this.$message.warning(res.data.msg)
                                        }
                                    })
                            } else {
                                this.$message.warning('请先输入分组名称')
                            }
                        } else if (params == 'addGroupC') {
                            this.addGroupV = false
                        }
                    } else {
                        let loading = this.$loading({
                            lock: true,
                            text: "正在努力加载中...",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.2)"
                        });
                        // console.log(this.$route.query.routerKeyPath)
                        // console.log(typeof(this.$route.query.routerKeyPath[1]))
                        var classifyIdP = 7;
                        if (typeof (this.$route.query.routerKeyPath[1]) == 'undefined') {
                            if (this.$route.query.routerKeyPath == '他的粉丝') {
                                this.$emit('setTextTitle', '他的粉丝')
                                classifyIdP = 11
                                lenve = 3
                            }
                            if (this.$route.query.routerKeyPath == '他的关注') {
                                this.$emit('setTextTitle', '他的关注')
                                classifyIdP = 7
                                lenve = 1
                            }
                        } else {
                            if (this.$route.query.routerKeyPath[1] == 'allFollow' ||
                                this.$route.query.routerKeyPath[1] == "'") {
                                classifyIdP = 7
                                lenve = 1
                            } else {
                                classifyIdP = this.$route.query.routerKeyPath[1]
                            }
                        }
                        if (classifyIdP != 'd') {
                            this.$store
                                .dispatch("studentAnsweringModule/concernedAllList", {
                                    classifyId: classifyIdP,
                                    followSoft: this.sortType,
                                    friendSoft: this.sortType,
                                    hisUserId: this.otherUserInfo.userid || this.otherUserInfo.id,
                                    lenve: lenve, //-1:黑名单,1:关注 2:好友,3:粉丝，4:新增好友,5:推荐好友"
                                    search: this.search,
                                    page: this.currentPage,
                                    limit: this.pageSize
                                })
                                .then(res => {
                                    console.log(res)
                                    this.friendGoupList = res.data.result.list;
                                    this.total = res.data.result.total;
                                    this.friendGoupList.map((item, index) => {
                                        this.friendGoupList[index].img = baseUrl + item.img;
                                    });
                                    loading.close();
                                })
                                .catch(_ => {
                                    // this.$message.error(res.msg);
                                    loading.close();
                                });
                        }else{
                            this.getHttpList()
                            loading.close();
                        }
                    }
                }
            }
        },
    };
</script>

<style lang="scss" scoped>
    .content-manage-untreated {
        margin: 10px 20px 0px 0px;

        span {
            font-size: 16px;
            margin-right: 30px;
            cursor: pointer;
        }

        span:hover {
            color: #1e90ff;
        }

        .search {
            padding-right: 25px;
            position: relative;
            bottom: 5px;
            float: right;
            width: 250px;
        }
    }

    .head_portrait {
        box-sizing: border-box;
        padding: 5px;

        .portrait {
            position: relative;

            .follow_icon {
                position: absolute;
                bottom: -2px;
                left: 50%;
                transform: translateX(-50%);
                margin: auto;
                color: orange;
            }
        }
    }

    .content-friend {
        background: #fff;
        padding: 5px;
        min-height: 520px;
        position: relative;
        width: 100%;
        margin-left: 10px;

        .box-card {
            margin: 0px 10px 10px 0px;
            width: 46.5%;
            height: 150px;
            float: left;
            position: relative;
            overflow: hidden;

            .content-friend-checked {
                width: 60px;
                height: 20px;
                position: absolute;
                top: 0;
                right: 0;
                transform: rotateY(-30deg);
                background-color: #409eff;
                text-align: center;

                i {
                    color: white;
                    font-size: 22px;
                }
            }

            .box-card-img {
                float: left;
                margin-top: 10px;
            }

            .box-card-content-friend {
                border-left: 1px solid #d9d9d9;
                font-size: 14px;
                float: left;
                margin-left: 10px;
                padding-left: 10px;
                line-height: 0.4em;
                width: 65%;
                text-align: left;
            }
        }
    }

    .pageStyle {
        margin: 20px auto;
    }

    .box-card:hover {
        -webkit-box-shadow: #ccc 0px 10px 10px;
        -moz-box-shadow: #ccc 0px 10px 10px;
        box-shadow: #ccc 0px 10px 10px;
    }
</style>